<template>
  <div>
    <!-- 表单组件 -->
    <el-form
      ref="form"
      :model="form"
      :label-width="formConfig.labelWidth"
      :rules="formConfig.formRules"
    >
      <el-row :gutter="10">
        <el-col
          v-for="item in formConfig.items"
          :key="item.prop"
          :xl="item.xl || 24"
          :lg="item.lg || 24"
          :md="item.md || 24"
          :sm="item.sm || 24"
          :xs="item.xs || 24"
        >
          <el-form-item
            :prop="item.prop"
            :label="item.label"
            :class="{ btnsConfig: item.btnConfig }"
          >
            <el-input
              v-if="item.type === 'Text'"
              :placeholder="item.placeholder || '请输入'"
              v-model="form[item.prop]"
              :maxlength="item.maxlength"
              @input="
                item.prop == 'nameUserDisplay'
                  ? (form[item.prop] = form[item.prop].replace(
                      /[^\a-\z\A\u4E00-\u9FA5]/g,
                      ''
                    ))
                  : ''
              "
            />
            <el-input
              v-if="item.type === 'Textarea'"
              type="textarea"
              :maxlength="item.maxlength"
              :placeholder="item.placeholder || '请输入'"
              v-model="form[item.prop]"
              :show-word-limit="item.showWordLimit"
              :rows="item.rows"
            />
            <el-select
              v-if="item.type == 'select'"
              v-model="form[item.prop]"
              :placeholder="item.placeholder || '请选择'"
              :style="{ width }"
              clearable
            >
              <el-option
                v-for="i in item.optionList"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </el-select>
            <!-- editable   文本框可输入 -->
            <!-- unlink-panels  两个面板之间的联动 -->
            <!-- picker-options 限制时间选择范围 -->
            <el-date-picker
              v-if="item.type == 'DatePicker'"
              :picker-options="item.isLimitRange ? pickerOptions : {}"
              prefix-icon="el-icon-time"
              :editable="false"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="截止时间"
              v-model="form[item.prop]"
              value-format="timestamp"
              type="daterange"
              range-separator="至"
              :style="{ width }"
              clearable
              format="yyyy-MM-dd"
            />
            <el-cascader
              v-if="item.type == 'Cascader'"
              ref="cascaderRef"
              v-model="form[item.prop]"
              :props="formConfig.group"
              clearable
              :placeholder="item.placeholder || '请选择'"
              @change="handleChange"
              :show-all-levels="false"
            />
            <template v-if="item.btnConfig">
              <el-button
                v-for="i in item.btnConfig"
                :key="i.prop"
                :type="i.type"
                :icon="i.icon"
                v-preventReClick
                @click="handleClick(i.prop)"
                >{{ i.label }}</el-button
              >
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  Form,
  FormItem,
  Input,
  Select,
  Option,
  Button,
  DatePicker,
  Row,
  Col,
  Cascader,
} from "element-ui";
export default {
  props: {
    /**
     * 组件宽度
     */
    width: {
      type: String,
      default: () => "100%",
    },
    /**
     * 表单配置
     */
    formConfig: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      // 绑定表单
      form: {},
    };
  },
  components: {
    "el-form": Form,
    "el-form-item": FormItem,
    "el-input": Input,
    "el-select": Select,
    "el-option": Option,
    "el-button": Button,
    "el-date-picker": DatePicker,
    "el-cascader": Cascader,
    "el-row": Row,
    "el-col": Col,
  },
  mounted() {},
  methods: {
    /**
     * 级联选择器
     * @param val 选择的数据
     */
    handleChange(val) {
      if (val) {
        this.form.groupId = [val];
        this.$refs.cascaderRef.forEach(
          (item) => (item.dropDownVisible = false)
        );
      } else {
        this.form.groupId = [];
      }
    },
    /**
     * 按钮组件传值
     */
    handleClick(prop) {
      //   console.log("val", val);
      //   点击确认按钮要校验表单
      if (prop == "sure") {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$emit("handleClick", {
              prop,
              data: this.form,
            });
          } else {
            return false;
          }
        });
        // 非确认按钮不用校验
      } else {
        this.$emit("handleClick", {
          prop,
          data: this.form,
        });
      }
    },
    /**
     * 表单重置/取消
     */
    resetForm() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scoped></style>
